<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>管理收货地址</title>
	<link rel="stylesheet" href="../frontDesk/css/base.css" type="text/css" />
	<link rel="stylesheet" href="../frontDesk/css/shop_common.css" type="text/css" />
	<link rel="stylesheet" href="../frontDesk/css/shop_header.css" type="text/css" />
	<link rel="stylesheet" href="../frontDesk/css/shop_manager.css" type="text/css" />
	<link rel="stylesheet" href="../frontDesk/css/shop_shdz_835.css" type="text/css" />
    <script type="text/javascript" src="../frontDesk/js/jquery.js" ></script>
    <script type="text/javascript" src="../frontDesk/js/topNav.js" ></script>

	<script type="text/javascript">
		// 页面就绪事件
		$(function(){
			var defaultOption = "<option value='0'>---- 请选择 ----</option>";

			// 为3个<select>添加默认选项
			$("#province").append(defaultOption);
			$("#city").append(defaultOption);
			$("#area").append(defaultOption);

			// 自动生成省级列表
			appendList(86,"province");

			// 为省级列表添加事件
			$("#province").change(function(){
				var value = this.value;
				// 清空市级列表
				$("#city").empty();
				$("#city").append(defaultOption);
				// 清空区级列表
				$("#area").empty();
				$("#area").append(defaultOption);
				if(value != 0){
					// 更新市级列表
					appendList(value,"city");
				}
			});

			// 为市级列表添加事件
			$("#city").change(function(){
				var value=this.value;
				// 清空区级列表
				$("#area").empty();
				$("#area").append(defaultOption);
				if(value != 0){
					// 更新市级列表
					appendList(value,"area");
				}
			});

			// 获取当前用户收货地址
			$.get("/address/address_page.shtml", function (json) {
				if (json.code == 200) {
					traversalAdd(json);
				}else{
					alert(json.message);
				}
			}, "json");
		});

		// parent是父级编号，sid是select标签的id属性的值
		function appendList(parent,sid){
			// 发送ajax请求
			$.ajax({
				"url":"/district/",
				"data":"parent="+parent,
				"type":"get",
				"dataType":"json",
				"success":function(json) {
					console.log(json);
					// 获取列表的数组
					var list = json.data;
					// 遍历数组
					for(var i=0;i<list.length;i++){
						// 每一条记录生成一个option
						var option="<option value='"+list[i].code+"'>"+list[i].name+"</option>";
						// 将option添加到select内部
						$("#"+sid).append(option);
					}
				}
			});
		}
	</script>

</head>
<body>
		<!-- Header  -wll-2013/03/24 -->
	<div class="shop_hd">
		<!-- Header TopNav -->
		<div class="shop_hd_topNav">
			<div class="shop_hd_topNav_all">
				<!-- Header TopNav Left -->
				<div class="shop_hd_topNav_all_left">
					<p>您好，欢迎来到<b><a href="/">ShopCZ商城</a></b>[<a href="">登录</a>][<a href="">注册</a>]</p>
				</div>
				<!-- Header TopNav Left End -->

				<!-- Header TopNav Right -->
				<div class="shop_hd_topNav_all_right">
					<ul class="topNav_quick_menu">

						<li>
							<div class="topNav_menu">
								<a href="#" class="topNavHover">我的商城<i></i></a>
								<div class="topNav_menu_bd" style="display:none;" >
						            <ul>
						              <li><a title="已买到的商品" target="_top" href="#">已买到的商品</a></li>
						              <li><a title="个人主页" target="_top" href="#">个人主页</a></li>
						              <li><a title="我的好友" target="_top" href="#">我的好友</a></li>
						            </ul>
						        </div>
							</div>
						</li>
                                                <li>
							<div class="topNav_menu">
								<a href="#" class="topNavHover">卖家中心<i></i></a>
								<div class="topNav_menu_bd" style="display:none;">
						            <ul>
						              <li><a title="已售出的商品" target="_top" href="#">已售出的商品</a></li>
						              <li><a title="销售中的商品" target="_top" href="#">销售中的商品</a></li>
						            </ul>
						        </div>
							</div>
						</li>

						<li>
							<div class="topNav_menu">
								<a href="#" class="topNavHover">购物车<b>0</b>种商品<i></i></a>
								<div class="topNav_menu_bd" style="display:none;">
									<!--
						            <ul>
						              <li><a title="已售出的商品" target="_top" href="#">已售出的商品</a></li>
						              <li><a title="销售中的商品" target="_top" href="#">销售中的商品</a></li>
						            </ul>
						        	-->
						            <p>还没有商品，赶快去挑选！</p>
						        </div>
							</div>
						</li>

						<li>
							<div class="topNav_menu">
								<a href="#" class="topNavHover">我的收藏<i></i></a>
								<div class="topNav_menu_bd" style="display:none;">
						            <ul>
						              <li><a title="收藏的商品" target="_top" href="#">收藏的商品</a></li>
						              <li><a title="收藏的店铺" target="_top" href="#">收藏的店铺</a></li>
						            </ul>
						        </div>
							</div>
						</li>

						<li>
							<div class="topNav_menu">
								<a href="#">站内消息</a>
							</div>
						</li>

					</ul>
				</div>
				<!-- Header TopNav Right End -->
			</div>
			<div class="clear"></div>
		</div>
		<div class="clear"></div>
		<!-- Header TopNav End -->


	</div>
	<div class="clear"></div>
	<!-- 面包屑 注意首页没有 -->
	<div class="shop_hd_breadcrumb">
		<strong>当前位置：</strong>
		<span>
			<a href="">首页</a>&nbsp;›&nbsp;
			<a href="">我的商城</a>&nbsp;›&nbsp;
			<a href="">已买到商品</a>
		</span>
	</div>
	<div class="clear"></div>
	<!-- 面包屑 End -->

	<!-- Header End -->	

	<!-- 我的个人中心 -->
	<div class="shop_member_bd clearfix">
		<!-- 左边导航 -->
		<div class="shop_member_bd_left clearfix">

			<div class="shop_member_bd_left_pic">
				<a href="javascript:void(0);"><img src="../frontDesk/images/avatar.png" /></a>
			</div>
			<div class="clear"></div>

			<dl>
				<dt>我的交易</dt>
				<dd><span><a href="/frontDesk/member.html">已购买商品</a></span></dd>
				<dd><span><a href="/frontDesk/favorite.html">我的收藏</a></span></dd>
				<dd><span><a href="/frontDesk/comment.html">评价管理</a></span></dd>
			</dl>

			<dl>
				<dt>我的账户</dt>
				<dd><span><a href="/frontDesk/member_info.html">个人资料</a></span></dd>
				<dd><span><a href="/frontDesk/password_eidt.html">密码修改</a></span></dd>
				<dd><span><a href="/frontDesk/address.html">收货地址</a></span></dd>
			</dl>

		</div>
		<!-- 左边导航 End -->
		
		<!-- 右边购物列表 -->
		<div class="shop_member_bd_right clearfix">
			
			<div class="shop_meber_bd_good_lists clearfix">
				<div class="title"><h3>管理收货地址<a style="float:right;" href="javasrcipt:void(0);" id="new_add_shdz_btn">新增收货地址</a></h3></div>
				<div class="clear"></div>
			<!-- 收货人地址 Title End -->
			<div class="shop_bd_shdz clearfix">
				<div class="shop_bd_shdz_lists clearfix">
					<ul id="addressList">
					</ul>
				</div>
				<!-- 新增收货地址 -->
				<div id="new_add_shdz_contents" style="display:none;" class="shop_bd_shdz_new clearfix">
					<div class="title">新增收货地址</div>
					<div class="shdz_new_form">
						<form id="add-address-form" method="post">
							<ul>
								<li><label for=""><span>*</span>收货人姓名：</label><input type="text" class="name" name="recipients" /></li>
								<li><label for=""><span>*</span>所在地址：</label>
									<select name="province" id="province">
									</select>
									<select name="city" id="city">
									</select>
									<select name="area" id="area">
									</select>
								</li>
								<li><label for=""><span>*</span>详细地址：</label><input type="text" name="address" class="xiangxi" /></li>
								<li><label for=""><span></span>手机号：</label><input type="text" name="phone" class="shouji" /></li>
								<li><label for="">&nbsp;</label><input type="button" onclick="addAddress()" value="增加收货地址" /></li>
							</ul>
						</form>
					</div>
				</div>
				<!-- 新增收货地址 End -->
			</div>
			<div class="clear"></div>
			</div>
		</div>
		<!-- 右边购物列表 End -->
	</div>
	<!-- 我的个人中心 End -->

	<!-- Footer - wll - 2013/3/24 -->
	<div class="clear"></div>
	<div class="shop_footer">
            <div class="shop_footer_link">
                <p>
                    <a href="">首页</a>|
                    <a href="">招聘英才</a>|
                    <a href="">广告合作</a>|
                    <a href="">关于ShopCZ</a>|
                    <a href="">关于我们</a>
                </p>
            </div>
            <div class="shop_footer_copy">
                <p>Copyright 2004-2013 itcast Inc.,All rights reserved.</p>
            </div>
        </div>
	<!-- Footer End -->
	<script type="text/javascript">
		jQuery(function(){
			jQuery("#new_add_shdz_btn").toggle(function(){
				jQuery("#new_add_shdz_contents").show(500);
			},function(){
				jQuery("#new_add_shdz_contents").hide(500);
			});
		});
		
		// 添加收获地址
		function addAddress() {
			// 发送Ajax请求
			$.ajax({
				url: "/address/add_address.shtml",
				data: $("#add-address-form").serialize(),
				type: "post",
				dataType: "json",
				success: function (json) {
					console.log(json);
					if (json.code == 200) {
						// 添加成功，更新收货地址列表
						traversalAdd(json);
						location.reload();
					}else{
						alert(json.message);
					}
				}
			});
		}
		
		// 渲染收货地址列表
		function traversalAdd(json) {
			// 清空列表
			$("#addressList").empty();
			for (var i = 0; i < json.data.length; i++) {
				var li = '<li><label><span><input type="radio" name="shdz" />' +
						'</span></label><em>'+json.data[i].district+'</em><em>'+json.data[i].address+'</em>' +
						'<em>'+json.data[i].recipients+'(收)</em><em>'+json.data[i].phone+'</em>' +
						'<span class="admin_shdz_btn"><a href="javaScript:void(0);" onclick="editAddress('+json.data[i].id+')">编辑</a>' +
						'<a href="javaScript:void(0);" onclick="delAdd('+json.data[i].id+', '+json.data[i].userId+')">删除</a></span></li>';
				$("#addressList").append(li);
			}
		}

		// 删除收货地址
		function delAdd(id, uid) {
			$.post("/address/del_address.shtml", {id: id, uid: uid}, function (json) {
				if(json.code == 200){
					location.reload();
				}
			}, "json");
		}

		// 修改收货地址页面
		function editAddress(id) {
			$.post("/address/update_address_page.shtml", {id: id}, function (json) {
				if(json.code == 200){
					location.href = "/frontDesk/address_edit.html"
				}else{
					alert(json.message);
				}
			}, "json");
		}
	</script>

</body>
</html>